<template>
    <div id="tTeam">
        <div  v-bind:class="{sShow: showS==0}">
            <score v-bind:message3="showS" v-on:listenToChildEvent3="showMsgFromChild3" :workData="workData" v-on:setTeamScore='setTeamScore'></score>
        </div>
        <table width="96%" class="tTable" cellspacing="0" cellpadding="0" style="margin: 0px 0px 0px 0.6vw;">
            <thead >
                <tr>
                    <th  style="padding:0 0 0 8px 8px;" ><input  type="checkbox" ref="ckb_head" name="check_box" @click="ckbAll"/></th>
                    <th>组名</th>
                    <th>人数</th>
                    <th>作业</th>
                    <th>分数</th>
                    <th>操作</th>
                 </tr>
            </thead>
        </table>
        <div class="tableDiv"style="overflow-y:scroll;height:23vw;margin:0 0.8vw 0 0.6vw">
            <div  v-for="(stu,index) in stus" >
                <div ref="teamItem"  @click="showMembers(index)" >
                    <el-row >
                        <div ref="asd" class="taskLine" style="borderBottom:#ccc solid 1px" >
                            <el-col :span="2"  ><input style="margin:35% 0  0 -25%;" type="checkbox"  @click.stop="ckbsome(index)" ref="ckb"/></el-col>
                            <el-col :span="4"width="30%" style="padding-top: 8px;padding-bottom: 8px;" v-bind:style="{color:text_color[index]}">{{stu.name}}</el-col>
                            <el-col :span="4" width="20%" style="padding-top: 8px;padding-bottom: 8px;" v-bind:style="{color:text_color[index]}">{{stu.num}}</el-col>
                            <el-col :span="6" width="30%" style="padding-top: 8px;padding-bottom: 8px;" v-bind:style="{color:text_color[index]}">{{stu.task}}</el-col>
                            <el-col :span="3" width="20%" style="padding-top: 8px;padding-bottom: 8px;" >{{stu.score}}</el-col>
                            <el-col :span="5" width="20%" style="padding-top: 8px;padding-bottom: 8px;" >
                                <div >
                                    <span @click="down_teamWork(index)"  style="font-weight:bold; text-decoration:underline;cursor: pointer;margin:0 3% 0 0;font-size:90%;color:gray">下载</span>
                                    <span @click.stop="showTeamScore(index)" style="font-weight:bold; cursor: pointer;font-size:90%;color:gray">评分</span>
                                </div>
                            </el-col>
                        </div>
                    </el-row>
                </div>
                <div ref="qwe" class="teamMembers" style="display:none;background:#f7f7f7">
                    <span style="margin:0 1% 0 0">成员:</span>
                    <span v-for="(menber,index) in stu.menber">{{menber}}    </span>
                </div>
            </div>
            </div>
        </div>
    </div>
</template>
<script>
     export default {
         data(){
             return{
                 props:["message"],
                 showS:0,
                 stus:[],
                 workData:{},
                 text_color: [],
                 stus_data:[]
             }
         },
         props:[
         'teamArr1'
        ],
        watch:{
            'teamArr1': function() {
                console.log('开始watch')
              this.stus= this.teamArr1;
              this.stus_data=this.teamArr1;
             // console.log("我就看看",this.stus_,this.stus_);
             this.text_color=[]
              for(var i=0; i<this.teamArr1.length;i++){
                 if(this.teamArr1[i].workStatus=="0"){
                    this.text_color.push('#e70012');//红色
                 }else if(this.teamArr1[i].workStatus=="-1"){
                     this.text_color.push('#dd8b02');//黄色
                 }else if(this.teamArr1[i].workStatus=="2"){
                    this.text_color.push('#018e3c');//绿色
                 }else{
                    this.text_color.push('#4d4d4d');//黑色
                 }
                //console.log( this.text_color);
              }


            }

          },
         methods:{
              down_teamWork(index){
                 console.log(index);
                 console.log(this.teamArr1);
                var workName=this.teamArr1[index].task
                var course=this.teamArr1[index].course
                var teamName=this.teamArr1[index].name
               if(this.text_color[index]=='#018e3c'||this.text_color[index]=='#dd8b02'){
                   window.open('/teamWork/download_stu/'+workName+'/'+course+'/'+teamName,'_self')
               }else{
                 this.$message({
                   type: 'warning',
                   message: "该团队没有提交作业",
                 })
               }
             },
             setTeamScore(score){
                this.stus[this.workData.index].score=score

            },
             cleanData(){
                 this.stus=[]
             },
             ckbAll(){
                console.log(this.$refs.ckb_head.checked);
                var ckbArr=this.$refs.ckb;
                 if( this.$refs.ckb_head.checked){//全选  
                   console.log(this.$refs.ckb_head.checked);                   
                   for(var i=0;i<ckbArr.length;i++){
                       if(ckbArr[i].checked==false){
                           ckbArr[i].click();
                       }
                   }
                }else{//全不选  
                    for(var i=0;i<ckbArr.length;i++){
                       if(ckbArr[i].checked==true){
                           ckbArr[i].click();
                       }
                   }   
                }  
            },
            lisnTeacher(data){
              if(data==0){
                this.stus=this.stus_data;
                //颜色处理
                this.text_color=[]
                for(var i=0; i<this.stus.length;i++){
                    if(this.stus[i].workStatus=="0"){
                        this.text_color.push('#e70012');//红色
                    }else if(this.stus[i].workStatus=="-1"){
                        this.text_color.push('#dd8b02');//黄色
                    }else if(this.stus[i].workStatus=="2"){
                        this.text_color.push('#018e3c');//绿色
                    }else{
                        this.text_color.push('#4d4d4d');//黑色
                    }
                }
              }else if(data==1){
                this.stus=[];
                this.text_color=[]
                for(var i=0;i<this.stus_data.length;i++){
                  if(this.stus_data[i].workStatus=="0"){
                    this.stus.push(this.stus_data[i]);
                  }
                }
                 //颜色处理
                for(var i=0; i<this.stus_.length;i++){
                    this.text_color.push('#e70012');//红色
                }
              } else if(data==2){
                this.stus=[];
                this.text_color=[]
                for(var i=0;i<this.stus_data.length;i++){
                  if(this.stus_data[i].workStatus=="-1"){
                    this.stus.push(this.stus_data[i]);
                  }
                }
                //颜色处理
                for(var i=0; i<this.stus_.length;i++){
                    this.text_color.push('#dd8b02');//黄色
                }
              }
            },
            ckbsome(index){
                var _this=this;
                _this.$store.commit('ckbClick',index); 
                console.log(index);
            },
             sendMsgToParent(){
                this.$emit("listenToChildEvent","this  from thasdadae chid commponent")
            },
             showMsgFromChild3(data){
                 this.showS=data;
             },
             showTeamScore(index){    
                var workData={}
                workData.workName=this.teamArr1[index].task
                workData.teamName=this.teamArr1[index].name
                workData.course=this.teamArr1[index].course
                workData.score=this.teamArr1[index].score
                workData.evaluate=this.teamArr1[index].evaluate
                workData.isTeam=2
                workData.index=index
                this.workData=workData      
                this.showS=1; 
             },
             showMembers(index){
                 /*console.log(this.$refs.teamItem[2].style.display)*/
                 for( var i =0;i<this.$refs.teamItem.length;i++){
                     this.$refs.qwe[i].style.display="none"
                     this.$refs.asd[i].style.borderBottom="1px solid #ccc";
                     this.$refs.asd[i].style.background="#f0efef";
                 };
                 if(this.$refs.qwe[index].style.display=="none"){
                     this.$refs.qwe[index].style.display="block";
                     this.$refs.asd[index].style.background="rgb(247, 247, 247)";
                     this.$refs.asd[index].style.borderBottom="none";
                 };
             }
         }
     }
</script>
<style>
    .sShow{
        display: none;
    }
    .Off2{
        background: red;
    }
    .Up2{
        background: green;
    }
    #teacher table td{
    padding-top: 2px;
    padding-bottom: 2px;
    text-align: center;
    border-top:solid 1px #ccc;
    border-left:solid 1px #ccc
/*    border: 1px solid #ccc;
*/
}
#tTeam .asd  tr{
    width: 100%
}
#tTeam .asd {
    width: 100%;
}
#tTeam .tableDiv .el-row {
}
#tTeam .tableDiv .el-col {
}
#tTeam .teamMembers{
    font-size: 85%;
    padding: 0px 0 2% 11%;
    text-align: left;
    color: #9c9c9c;
    background: white;
    border-bottom: 1px solid #ccc
}
#tTeam .taskLine{
    font-size: 95%;
    color: #4d4d4d;
    height: 40px;
    background: #f0efef;
    text-align: center;
}
</style>